<template>
	<scroll-view scroll-y class="scroll_view">
		<HotTabs />
		<view class="list">
			<view class="item" v-for="(item,index) in list"
				@click="router(`/pages/home/markets_deta?id=${item.product_id}&type=${type}`)">
				<!-- <view class="item" v-for="(item,index) in list"
				@click="router(`/pages/home/collection_deta_two?id=${item.product_id}`)"> -->
				<view class="item_box">
					<view class="name">{{item.product_name}}</view>
					<view class="cover">
						<image :src="item.product_cover"></image>
						<view class="label">在售：{{item.total}}份</view>
					</view>
					<view class="price">￥{{item.price}}</view>
				</view>
				<image :src="`${baseImageUrl}/common/d.png`" class="d_cover" v-if="index%2==0"></image>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import HotTabs from "@/components/home/HotTabs.vue";
	export default {
		components: {
			HotTabs
		},
		props: {
			type: {
				type: [Number, String],
				default: ""
			}
		},
		inject: ["get_list"],
		computed: {
			list() {
				return this.get_list();
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll_view {
		height: calc(100vh - #{$navbarHeight} - 400rpx);

		.list {
			padding-left: 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 328rpx;
				height: 414rpx;
				padding-bottom: 26rpx;
				box-sizing: content-box;
				position: relative;

				.d_cover {
					width: 750rpx;
					height: 62rpx;
					position: absolute;
					left: 0;
					bottom: 0;
				}

				.item_box {
					width: 100%;
					height: 100%;
					padding: 65rpx 0 12rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/common/item.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					position: relative;
					z-index: 2;

					.name {
						color: #351400;
						font-size: 28rpx;
						font-weight: 400;
						font-family: LiSu;
					}

					.cover {
						width: 212rpx;
						height: 212rpx;
						position: relative;
						z-index: 2;

						image {
							width: 100%;
							height: 100%;
						}

						.label {
							width: 100%;
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
							color: #FFFFFF;
							font-size: 20rpx;
							font-weight: 400;
							font-family: SimSun;
							background: url(#{$baseImageUrl}/common/label3.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							left: 0;
							bottom: 0;
							z-index: 2;
						}
					}

					.price {
						color: #FFFFFF;
						font-size: 18rpx;
						font-family: SimSun;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>